<!--
 * @Description: 一键登陆
 * @Author: Kerwin
 * @Date: 2023-07-01 16:22:48
 * @LastEditTime: 2023-12-29 15:47:57
 * @LastEditors:  Please set LastEditors
-->
<template>
  <view class="c_container">
    <view>一键登录</view>
    <view>若您未注册，将使用手机号自动注册</view>
    <view>请在移动数据网络下使用该功能</view>
    <view class="inputBox">
      <input
        class="inpt phone"
        type="number"
        v-model="form.username"
        maxlength="11"
        @blur="mobileBlurFn"
        placeholder-class="placeholderStyle"
        placeholder-style="color: #D3DBE0;font-size: 34rpx;font-weight: normal;"
        placeholder="请输入手机号"
      />
      <cover-image
        v-if="form.username"
        @tap="clearFn"
        class="close"
        src="https://naoyuekang-weixindev.oss-cn-chengdu.aliyuncs.com/mine/close.png"
      ></cover-image>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store'
import { userApi } from '@/api'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const props = withDefaults(
  defineProps<{
    isBack?: boolean
  }>(),
  {
    isBack: true
  }
)
const form = reactive({
  username: '',
  code: '',
  type: 10
})
// 手机号验证
const telReg = /^1[3456789]\d{9}$/
function mobileBlurFn() {
  if (form.username !== '') {
    if (!telReg.test(form.username)) {
      uni.showToast({
        title: '请输入正确的手机号',
        icon: 'none'
      })
    }
  } else {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
  }
}
function clearFn() {
  form.username = ''
}
// h5端 阿里云一键登录
function isWifi() {
  try {
    let wifi = true
    const ua = window.navigator.userAgent
    const con = window.navigator.connection
    // 如果是微信
    if (/MicroMessenger/.test(ua)) {
      if (ua.indexOf('WIFI') >= 0) {
        return true
      }
      wifi = false
      // 如果支持navigator.connection
    } else if (con) {
      const network = con.type
      if (network !== 'wifi' && network !== '2' && network !== 'unknown') {
        wifi = false
      }
    }
    return wifi
  } catch (e) {
    return false
  }
}
const phoneNumberServer = new PhoneNumberServer()
const sdkVersion = phoneNumberServer.getVersion() // 返回SDK版本号，例如'1.0.0'
// eslint-disable-next-line no-console
console.log('alisdkVersion===>', sdkVersion)
const AUTH_CODE = {
  SUCCESS: 600000
}
const getAuthToken = async () => {
  const res = await userApi.getAuthToken({})
  if (res.code === 200) {
    return res.data.tokenInfo
  }
  throw new Error('获取accessToken或jwtToken失败')
}
const checkAuth = async (phone: any, accessToken: any, jwtToken: any) => {
  const authRes = await phoneNumberServer.checkAuthAvailable({
    phoneNumber: phone,
    accessToken,
    jwtToken
  })

  if (authRes.code !== AUTH_CODE.SUCCESS) {
    throw new Error('身份鉴权失败')
  }
  return true
}
const getVerifyToken = async () => {
  const verifyRes = await phoneNumberServer.getVerifyToken()
  if (verifyRes.code !== AUTH_CODE.SUCCESS || !verifyRes.spToken) {
    throw new Error('获取spToken失败')
  }

  return verifyRes.spToken
}
const oneClickLogin = async () => {
  try {
    const { phone, countryCode } = this.onePhoneQuery
    // 获取accessToken、jwtToke
    const { accessToken, jwtToken } = await getAuthToken()
    // 验证用户身份
    await checkAuth(phone, accessToken, jwtToken)
    // 获取验证码token
    const spTocken = await getVerifyToken()
    // 登录成功则返回token
    // const token = await login(phone, countryCode, spTocken)
  } catch (error) {
    console.error(error)
  }
}
// =======END
</script>

<style lang="scss" scoped>
.c_container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inputBox {
  position: relative;
  border-bottom: 2rpx solid #e6ecf0;
  margin-bottom: 20rpx;

  &.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .label {
    font-size: 36rpx;
    color: #333;
    font-weight: bold;
  }

  .inpt {
    display: block;
    width: 500rpx;
    padding: 30rpx 0;
    color: #242426;
    font-weight: bold;
    font-size: 34rpx;
  }

  .close {
    width: 28rpx;
    height: 28rpx;
    position: absolute;
    bottom: 0;
    right: 0;
    top: 0;
    margin: auto;
    z-index: 2;
  }
}

</style>
